<template>
    <div class="app-activity-sepJD-warp">
        <!--<img class="app-activity-sepJD-img" src="http://img.uuuda.com/udaWeapp2.0/icon/activity/activity-SepJD1.png?v=20201010" />-->
        <img class="app-activity-sepJD-img" src="http://img.uuuda.com/udaWeapp2.0/icon/activity/driverDay.png"/>

        <!--<div class="app-activity-center-box">-->
            <!--<img class="app-activity-sepJD-img" src="http://img.uuuda.com/udaWeapp2.0/icon/activity/activity-SepJD1-1.png?v=20201010" />-->
            <!--<div class="app-activity-sepJD-center">-->
                <!--<p class="sepJD-center-title">本周已完成<span style="color: #FF6133;margin-left: 4px">{{orderCount>=5?5:orderCount}}单</span></p>-->
                <!--<p class="sepJD-center-dec" v-if="orderCount==0">完成3单可获得3元拼车券</p>-->
                <!--<p class="sepJD-center-dec" v-if="orderCount>0 && orderCount<3">再完成{{3-orderCount}}单可获得3元拼车券</p>-->
                <!--<p class="sepJD-center-dec" v-if="orderCount>=3 && orderCount<5">再完成{{5-orderCount}}单可获得2元拼车券</p>-->
                <!--<p class="sepJD-center-dec" v-if="orderCount>=5 ">集单成功，您已获得5元优惠券，待活动结束后发放。</p>-->
                <!--<div class="sepJD-center-progress-box">-->
                    <!--&lt;!&ndash;底部线&ndash;&gt;-->
                    <!--<div class="sepJD-home-line">-->
                        <!--<div class="sepJD-home-line-cell" :class="{'img-line-cur':orderCount>=1}"></div>-->
                        <!--<div class="sepJD-home-line-cell" :class="{'img-line-cur':orderCount>=2}"></div>-->
                        <!--<div class="sepJD-home-line-cell" :class="{'img-line-cur':orderCount>=3}"></div>-->
                        <!--<div class="sepJD-home-line-cell" :class="{'img-line-cur':orderCount>=4}"></div>-->
                    <!--</div>-->
                    <!--<div class="sepJD-center-progressCell-box">-->
                        <!--<div class="sepJD-center-progress-cell">-->
                            <!--<img  src="http://img.uuuda.com/udaWeapp2.0/icon/activity/activity-SepJD-logo1.png?v=20201010"  :class="{'sepJD-logo-am':orderCount==1}"  v-if="orderCount>=1">-->
                            <!--<img  src="http://img.uuuda.com/udaWeapp2.0/icon/activity/activity-SepJD-logo2.png?v=20201010"  v-if="orderCount<=0">-->
                            <!--<p  v-if="orderCount>=1">1单</p>-->
                            <!--<p  class="sepJD-gary-word" v-if="orderCount<1">1单</p>-->
                        <!--</div>-->
                        <!--<div class="sepJD-center-progress-cell">-->
                            <!--<img src="http://img.uuuda.com/udaWeapp2.0/icon/activity/activity-SepJD-logo1.png?v=20201010"  :class="{'sepJD-logo-am':orderCount==2}" v-if="orderCount>=2">-->
                            <!--<img src="http://img.uuuda.com/udaWeapp2.0/icon/activity/activity-SepJD-logo2.png?v=20201010"  v-if="orderCount<2">-->
                            <!--<p   v-if="orderCount>=2">2单</p>-->
                            <!--<p  class="sepJD-gary-word" v-if="orderCount<2">2单</p>-->
                        <!--</div>-->
                        <!--<div class="sepJD-center-progress-cell">-->
                            <!--<img  class="sepJD-center-progress-cell-light sepJD-light-am" src="http://img.uuuda.com/udaWeapp2.0/icon/activity/activity-SepJD-logo8.png?v=20201010" v-if="orderCount<=3 && orderCount>2">-->
                            <!--<img src="http://img.uuuda.com/udaWeapp2.0/icon/activity/activity-SepJD-logo7.png?v=20201010" :class="{'sepJD-logo-am':orderCount==3}" v-if="orderCount>=3">-->
                            <!--<img src="http://img.uuuda.com/udaWeapp2.0/icon/activity/activity-SepJD-logo6.png?v=20201010" v-if="orderCount<3">-->
                            <!--<p  v-if="orderCount>=3">3单</p>-->
                            <!--<p  class="sepJD-gary-word" v-if="orderCount<3">3单</p>-->
                        <!--</div>-->
                        <!--<div class="sepJD-center-progress-cell">-->
                            <!--<img src="http://img.uuuda.com/udaWeapp2.0/icon/activity/activity-SepJD-logo1.png?v=20201010" :class="{'sepJD-logo-am':orderCount==4}" v-if="orderCount>=4">-->
                            <!--<img src="http://img.uuuda.com/udaWeapp2.0/icon/activity/activity-SepJD-logo2.png?v=20201010" v-if="orderCount<4">-->
                            <!--<p v-if="orderCount>=4">4单</p>-->
                            <!--<p  class="sepJD-gary-word" v-if="orderCount<4">4单</p>-->
                        <!--</div>-->
                        <!--<div class="sepJD-center-progress-cell">-->
                            <!--<img  class="sepJD-center-progress-cell-light sepJD-light-am" src="http://img.uuuda.com/udaWeapp2.0/icon/activity/activity-SepJD-logo8.png?v=20201010" v-if="orderCount>=5">-->
                            <!--<img src="http://img.uuuda.com/udaWeapp2.0/icon/activity/activity-SepJD-logo4.png?v=20201010" :class="{'sepJD-logo-am':orderCount>=5}" v-if="orderCount>=5">-->
                            <!--<img src="http://img.uuuda.com/udaWeapp2.0/icon/activity/activity-SepJD-logo3.png?v=20201010" v-if="orderCount<5">-->
                            <!--<p   v-if="orderCount>=5">5单</p>-->
                            <!--<p  class="sepJD-gary-word" v-if="orderCount<5">5单</p>-->
                        <!--</div>-->

                    <!--</div>-->

                <!--</div>-->
            <!--</div>-->

        <!--</div>-->

        <!--<img class="app-activity-sepJD-img" src="http://img.uuuda.com/udaWeapp2.0/icon/activity/activity-SepJD2.png?v=20201010" />-->


    </div>
</template>
<script>
let axios = require("axios");


export default {
    data() {
        return {
          orderCount:0,
            token:''
        };
    },

    created() {

    },
    mounted(){
        let self=this;
        let query = self.$route.query;
        let token = query.u || '';
        if(token.split('?').length>=2){
            self.token=token.split('?')[0]
        }else{
            self.token=token

        }

        console.log("测试测试");
        console.log(token.split('?'));
        self.initPage(self.token)

    },

    watch:{

    },
    methods: {

        //初始化页面
        initPage(token){
            let self = this;

            //请求城市区域接口
            axios({
                method: "post",
                url: "/api/order/evaluates",
                params: {
                   'token':token
                }
            }).then(function(res) {
                let data = res.data;
                if(data.errno == 200){
                    console.log(data.data.count)
                    self.orderCount=data.data.count;


                }
            });



        },


    }
};
</script>

<style>
    .app-activity-sepJD-warp{
        position: relative;
        width: 100%;
        display: block;
        background: #fff;
        /*height: 100%;*/
    }
    .app-activity-center-box{
        position: relative;
        display: block;
        height: 161px;
        margin-bottom: 24px;

    }
    .app-activity-sepJD-center{
        width: 351px;
        position: absolute;
       top:0px;
        left: 50%;

        background: #424266;
        box-shadow: 0px 6px 2px 0px rgba(255, 183, 25, 0.01);
        border-radius: 8px;
        margin: 0 12px 0 -175.5px;
        padding-bottom: 24px;

    }
    /*光*/
    .sepJD-center-progress-cell-light{
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -42px!important;
        margin-left: -28px!important;
        width: 64px!important;
        height: 64px!important;

    }

    .sepJD-center-title{
        position: relative;
        font-size: 18px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: bold;
        color: white;
        line-height: 22px;
        margin-left: 16px;

        padding-top: 16px;
    }
    .app-activity-sepJD-img{
        position: relative;
        width: 100%;
        height: 100%;
        display: block;
        /*margin:  0 auto;*/
    }
    .sepJD-home-line{
        position: relative;
        width: 90%;
          display: flex;
        margin: 0 auto;
        top: 22px;
    }
    .sepJD-center-dec{
        position: relative;
        font-size: 14px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 400;
        color: white;
        line-height: 20px;
        /*text-align: left;*/
        padding-top: 4px;
        margin-left: 16px;

    }
    .sepJD-center-progress-box{
        position: relative;
        margin: 0 auto;
        padding-top: 23px;

    }
    .sepJD-center-progressCell-box{
        position: relative;
        display: flex;
        align-items: center;
        width: 90%;
        margin: 0 auto;
        justify-content: space-between;
    }
    .sepJD-center-progress-cell{
        position: relative;
        width: 32px;
    }
    .sepJD-center-progress-cell img{
        width: 40px;
        height: 40px;
        display: block;
        margin: 0 auto;
    }

    .sepJD-center-progress-cell p{
        font-size: 12px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: bold;
        color: #FF7A1E;
        line-height: 16px;
        text-align: center;
        margin-top: 3px;
    }
    .progress-cell-img-box{
        position: relative;
    }
    .progress-img-box{
        position: relative;
        /*display: flex;*/
    }
    .sepJD-home-line-cell{
        position: relative;
        background: #DED7D3;
        flex: 1;
        height: 8px;
     /*width: 23px;*/

    }
    .img-line-cur{
        background: linear-gradient(180deg, #FFEA37 0%, #FFC619 100%);

    }
    .sepJD-gary-word{
        color: #B1B4C4!important;
    }
    .sepJD-logo-am{
        -webkit-animation:line-cur-am 1s linear .5s infinite forwards;
        animation:line-cur-am 1s linear .5s infinite forwards;
        -webkit-animation-fill-mode:both;
    }



    @-webkit-keyframes line-cur-am{

        0%{
            -webkit-transform: scale(1);
            -ms-transform: scale(1);
            transform:scale(1);
        }
        50%{ -webkit-transform: scale(1.1);
            -ms-transform: scale(1.1);
            transform:scale(1.1);
        }
        100%{ -webkit-transform: scale(1);
            -ms-transform:   scale(1);
            transform:  scale(1);
        }
    }
    @keyframes line-cur-am{
        0%{
            -webkit-transform: scale(1);
            -ms-transform: scale(1);
            transform:scale(1);
        }
        50%{
            -webkit-transform: scale(1.1);
            -ms-transform: scale(1.1);
            transform:scale(1.1);
        }
        100%{ -webkit-transform: scale(1);
            -ms-transform:   scale(1);
            transform:  scale(1);
        }
    }
    /*光旋转动画*/
    .sepJD-light-am{
        -webkit-animation:light-am 5s linear infinite;
        animation:light-am 5s linear infinite;
        -webkit-animation-fill-mode:both;
        transform-origin:center;

    }
    @-webkit-keyframes light-am {

        0% {
            -webkit-transform: rotate(0deg);
        }

        50% {
            -webkit-transform: rotate(180deg);

        }

        100% {
            -webkit-transform: rotate(360deg);
        }

    }
    @keyframes light-am{
        0% {
            -webkit-transform: rotate(0deg);
        }

        50% {
            -webkit-transform: rotate(180deg);
        }

        100% {
            -webkit-transform: rotate(360deg);
        }
    }





</style>
